<template>
  <label @click="switchChecked" :style="{ fontSize }">
    <radio
      :color="checkedColor"
      :style="`transform: scale(${switchScale})`"
      value="0"
      :checked="modelValue === checkedValue"
    />{{ label }}</label
  >
</template>

<script setup lang="ts">
import { ref } from 'vue'
const props = defineProps({
  label: {
    type: String,
    default: ''
  },
  modelValue: {
    type: null,
    require: true
  },
  switchScale: {
    type: Number,
    default: 0.7
  },
  checkedValue: {
    type: null,
    default: 1
  },
  unCheckedValue: {
    type: null,
    default: 0
  },
  checkedColor: {
    type: String,
    default: '#fdcb31'
  },
  fontSize: {
    type: String,
    default: '25rpx'
  }
})
const emits = defineEmits<{
  (e: 'update:modelValue', newVal: Object): void
}>()
const checkedFlag = ref<string>('0')
function switchChecked() {
  const isChecked = checkedFlag.value === '1'
  checkedFlag.value = isChecked ? '0' : '1'
  emits('update:modelValue', isChecked ? props.unCheckedValue : props.checkedValue)
}
</script>

<style scoped></style>
